<template>
    <div class="enjoy">
        <div class="enjoy-title">
            <img class="enjoy-title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" :alt="title">
            {{ title }}
        </div>
        <ul class="enjoy-list">
            <li class="enjoy-list-item border-bottom" v-for="item in list" :key="item.id">
                <div class="enjoy-list-img">
                    <img :src="item.imgUrl" :alt="item.title">
                </div>
                <div class="enjoy-list-desc">
                    <p class="enjoy-list-title">{{ item.title }}</p>
                    <p class="enjoy-list-comment">
                        <span class="enjoy-list-star">
                            <span class="star" :style="item.style">★★★★★</span>
                            <span class="bg">★★★★★</span>
                        </span>
                        <span class="enjoy-list-num">{{ item.num }}</span>条评论
                    </p>
                    <p class="enjoy-list-price">
                        <span><span class="price">￥<span class="price-num">{{ item.price }}</span></span>起</span>
                        <span class="address">{{ item.address }}</span>
                    </p>
                </div>
            </li>
        </ul>
        <div class="enjoy-all">查看所有产品</div>
    </div>
</template>

<script>
export default {
  name: 'HomeEnjoy',
  props: {
    list: Array
  },
  data () {
    return {
      title: '猜你喜欢'
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    @import '~styles/variables.styl'
    .enjoy
        border-top .2rem solid #eee
        .enjoy-title
            margin .2rem
            line-height .4rem
            font-size .32rem
            .enjoy-title-img
                width .32rem
        .enjoy-list
            margin-left .24rem
            .enjoy-list-item
                padding .2rem 0
                height 2rem
                .enjoy-list-img
                    float left
                    width 2rem
                    img
                        width 2rem
                .enjoy-list-desc
                    overflow hidden
                    padding-left .2rem
                    .enjoy-list-title
                        margin-top .26rem
                        height .44rem
                        line-height .44rem
                        font-size .32rem
                        color #212121
                    .enjoy-list-comment
                        margin .2rem 0
                        .enjoy-list-star
                            float left
                            position relative
                            width 1.2rem
                            height .32rem
                            margin-right .2rem
                            font-size .28rem
                            .star
                                overflow hidden
                                position absolute
                                left 0
                                top 0
                                z-index 2
                                color #ffb436
                            .bg
                                position absolute
                                color #e0e0e0
                    .enjoy-list-price
                        position relative
                        width 100%
                        .price
                            color: #ff8300
                            .price-num
                                font-size .4rem
                        .address
                            position absolute
                            right .24rem
                            bottom 0
                            width 1.4rem
                            text-align right
                            ellipsis()
        .enjoy-all
            line-height .4rem
            padding .2rem 0
            text-align center
            color $bgColor
</style>
